<template>
	<view class="goodsitem">
		<view class="item">
			<image class="img" :src="info.image" mode="aspectFill"></image>
			<!-- 	<view class="img">
			<goods-view :src="info.image"></goods-view>
			</view> -->
			<view class="txtbox">
				<view class="title ellipsis">
					{{ info.name }}
				</view>
				<text class="spec_value_str">x{{ info.spec_value_str }}</text>
				<view class="price">
					<view class="priceBox">
						<text>￥{{ info.order_amount }}</text>
					</view>
					<view class="state" v-if="info.refund_status && info.refund_status > 0">已退款</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'goodsitem',
		data() {
			return {};
		},
		props: ['info'],
	};
</script>

<style lang="scss" scoped>
	.item {
		width: $connet-width;
		height: 220rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		font-size: $uni-font-size-13;
		color: #000000;
		overflow: hidden;
		margin: $submargin-width auto;
		display: flex;
		position: relative;

		.img {
			width: 180rpx;
			height: 180rpx;
			float: left;
			margin: 20rpx;
			margin-right: $submargin-width;
		}

		.txtbox {
			width: 440rpx;
			float: left;
			height: 180rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			font-size: $uni-font-size-14;
			margin-left: 30rpx;
			.title {
				margin-top: $submargin-width;
			}
			.spec_value_str {
				color: #999999;
				font-size: $uni-font-size-12;
			}
			.price {
				display: flex;

				color: $price-color;
				.num {
					display: inline-block;
					margin-left: 5rpx;
					font-size: $uni-font-size-12;
					color: $placeholder-colcor;
				}
				.state {
					color: $placeholder-colcor;
				}
			}
		}
	}
</style>